<template>
<div>
    <div class="Cashierherade" >
          <router-link to="/member"><img style="margin-left:4%;margin-top:5%;float:left" src="/src/assets/微信图片_20220829174837.png"/></router-link>
          <span style="line-height:55px">收银台</span>
    </div>
    <div class="Cashierbotton">
    <div style="width: 100%;height:50px;float: left;border-bottom:1px solid #f2f2f2"><span style="float:left;line-height:50px;margin-left:2%;font-size:14px">服务名称</span><span style="float:right;font-size:14px;margin-right:2%">会员卡</span></div>
    <div style="width: 100%;height:50px;float: left;border-bottom:1px solid #f2f2f2"><span style="float:left;line-height:50px;margin-left:2%;font-size:14px">服务期限</span><span style="float:right;font-size:14px;margin-right:2%">1年</span></div>
    <div style="width: 100%;height:50px;float: left;border-bottom:1px solid #f2f2f2"><span style="float:left;line-height:50px;margin-left:2%;font-size:14px">应付金额</span><span style="float:right;font-size:14px;margin-right:2%">￥399.00</span></div>
    </div>
    <div class="cashierbotton1">
        <span style="float:left;line-height:50px;margin-left:2%;font-size:14px;color:#999999">支付方式</span>
    </div>
      <div class="Cashierbotton" >
    <div style="width: 100%;height:50px;float: left;border-bottom:1px solid #f2f2f2" v-for="item in arr" :key="item">
        <img style="float:left;margin-left:2%;margin-top:4%" :src="item.src"/>
        <span style="float:left;line-height:50px;margin-left:2%;font-size:14px">{{item.span}}</span>
       
    <van-radio-group v-model="checked" style="float:right;font-size:14px;margin-right:2%;margin-top:4%">
        <van-radio :name="item.name" checked-color="#ec7b67" icon-size="16px"></van-radio>
       
    </van-radio-group></div>
    <div class="Cashierfoot">
            <div style="width:100%;text-align:center;margin-top:50%">
                <span style="color:#d1d1d1;font-size:10px">支付即代表同意</span><span style="color:#ec7b67;font-size:10px">《会员服务协议》</span>
                <p><router-link to="/memberCenter"><button style="width:90%;border:0px;height:50px;background-color:#ec7b67;font-size:14px;color:#FFFFFF"><b>确认支付￥299.00</b></button></router-link></p></div>
    </div>
    
    </div>
    
</div>
</template>

<script setup lang='ts'>
import { ref } from "@vue/reactivity";

    let checked=ref(1)
    let arr=ref([
        {'src':'/src/assets/微信图片_20220901185635.png',span:'支付宝支付',name:'0'},
        {'src':'/src/assets/微信图片_20220901185649.png',span:'微信支付',name:'1'},
        {'src':'/src/assets/微信图片_20220830111132.png',span:'招行卡支付',name:'2'},
        {'src':'/src/assets/微信图片_20220830111138.png',span:'余额支付',name:'3'},
    ])
</script>

<style>
    .Cashierherade{width: 100%;height:50px;float: left;text-align: center;position:flex;border-bottom:1px solid #f2f2f2}
    .cashierbotton1{width: 100%;height:50px; background-color:#f2f2f2 ;float: left;}
    .Cashierfoot{width: 100%; background-color:#f2f2f2 ;float: left;}
</style>